<template>
    <div class="cart" style="margin: 0 17.8%;">
        <!--商品列表-->
        <div class="book">
            <div class="book-content" style="width: 100%; display: flex; flex-wrap: wrap;">
                <div v-for="collect in bookInfo" :key="collect.id" :title="collect.book.name"
                     style="margin: 2px 0 2px 0; display: flex; border: 10px solid rgb(245 245 245);">
                    <div class="img-box">
                        <img :src="require('@/' + collect.book.bookImage)" class="imgbackground">
                    </div>
                    <div class="book-msg">
                        <div style="height: 93%;">
                            <h5>书名：{{ collect.book.name }}</h5>
                            <h5 class="author">作者：{{ collect.book.author }}</h5>
                            <h5 class="author">出版日期：{{ collect.book.workTime }}</h5>
                            <p class="price">售价：￥{{ collect.book.price }}元</p>
                            <p class="sales">销量：{{ collect.book.sales }}册</p>
                            <p class="sales" :title="collect.book.bookDes">书籍简介：{{
                                    collect.book.bookDes.length > 75 ? collect.book.bookDes.substring(0, 75) + '...' : collect.book.bookDes
                                }}</p>
                        </div>
                        <div style="float: bottom; display: flex;">
                            <img class="collect-svg" :src="require('@/assets/image/svg/collect.svg')" v-if="collect" title="取消收藏" @click="bookCollect(collect)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页查询 -->
        <div style="padding: 8px 0 20px 0; text-align: left; ">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[3, 6, 9]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, -> , jumper"
                 :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {removeCollect, page} from "@/api/book/collect";

export default {
    name: "CollectPage",
    des: "收藏图书",
    data() {
        return {
            bookInfo: [],
            params: {},
            pageNum: 1,
            pageSize: 3,
            loading: false,
            headerBg: 'headerBg',
            bookDes: '这个世界,不会偏爱任何一个不劳而获的人,当然也不会,辜负任何一个默默努力的人。',
            total: 0, // 总数
        }
    },
    created() {
        this.load()
    },
    methods: {
        // 个数
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.load()
        },
    
        // 页码
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.load()
        },
        
        // 刷新
        load() {
            page(this.pageNum, this.pageSize, this.params).then(res => {
                this.bookInfo = res.data.records;
                this.total = res.data.total
            }).catch(() => this.loading = false)
        },
    
        // 图书收藏
        bookCollect(book) {
            removeCollect(book.id).then(res => {
                this.$message.success("图书取消收藏成功")
                this.load()
            }).catch(res => this.$message.warning("图书取消收藏失败"))
        }
    }
}
</script>

<style scoped>

@import '~font-awesome/css/font-awesome.min.css';

.img-box {
    /*width: 200px;*/
    height: 310px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box .imgbackground {
    width: 200px;
    height: 310px;
}

.book {
    display: flex;
}

.book-msg {
    width: 170px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg p {
    margin-top: 10px;
    line-height: 1.5;
    font-size: smaller;
}

.book-msg h5 {
    font-size: smaller;
    margin-bottom: 5px;
}

.collect-svg {
    width: 24px;
    height: 22px;
    margin: -4px 0 0 5px;
}

</style>
